<template>
  <div style="width: 100%; height: 100%">
    <div style="background-color: #0c2039">
      <el-form ref="form" :model="form" label-width="54px">
        <el-container
          style="display: flex; flex-direction: column; height: 100vh"
        >
          <!-- //头部 -->
          <el-header class="HeaderBox">
            <div class="HeaderOne">logo</div>
            <div class="HeaderTwo">
              <h1 class="titleWriting">离线绝缘体评估选择</h1>
            </div>
            <div class="HeaderThree">时间：{{ timer | formatDate }}</div>
          </el-header>

          <!-- 中间部分 -->
          <el-main style="flex: 1; padding: 0">
            <div class="TopBox">
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="6">
                  <div class="grid-content">
                    <el-form-item>
                      <el-select
                        v-model="form.region"
                        placeholder="请输入1"
                        class="titleDropDown"
                      >
                        <el-option
                          v-for="item in metaDate"
                          :key="item.name"
                          :label="item.name"
                          :value="item.name"
                          @click.native="selectOption(item)"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-col>
                <el-col :span="6"
                  ><div>
                    <el-form-item
                      ><h2 class="displayText">
                        {{ form.region }}
                      </h2></el-form-item
                    >
                  </div>
                </el-col>
                <el-col :span="6"
                  ><div>
                    <el-form-item>
                      <el-button
                        class="historyBut"
                        type="primary"
                        @click="history"
                        >历史记录</el-button
                      >
                    </el-form-item>
                  </div></el-col
                >
              </el-row>
            </div>
            <div class="BlueBox">
              <div class="LeftBox">
                <div class="topLeftBox">
                  <!-- 内容 -->
                  <div class="content" v-for="item in subParams" :key="item.id">
                    <div>
                      <el-form-item>
                        <el-checkbox-group v-model="form.type">
                          <el-checkbox
                            :label="item.name"
                            :value="item.id"
                            name="type"
                            style="color: #409eff"
                          ></el-checkbox>
                        </el-checkbox-group>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item>
                        <el-select v-model="item.id" placeholder="请选择">
                          <el-option
                            v-for="item2 in item.select"
                            :key="item2.id"
                            :label="item2.name"
                            :value="item2.name"
                            @selectbox="changexialakuang(item2)"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <!-- 固定栏目 -->
                </div>
                <div class="Fixedbox">
                  <el-form-item
                    ><span class="fontText"
                      >测量时绕组温度( )°C,U相( )mO,v相( )mO,w相( )mO</span
                    ></el-form-item
                  >
                </div>
              </div>

              <div class="RightBox">
                <div
                  class="topRightBox"
                  v-for="item3 in dingzidata.state"
                  :key="item3.id"
                >
                  <div class="onebox">
                    <p>评分等级</p>
                  </div>
                  <div class="twobox">
                    <p>分数</p>
                  </div>
                  <div class="threebox">
                    <p>综合评估</p>
                  </div>
                  <div class="fourbox">
                    <p>建议措施</p>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
          <!-- 底部 -->
          <el-footer>
            <div class="Footbox">
              <el-button type="primary" class="PerformAssessment"
                >执行评估</el-button
              >
              <el-button
                type="primary"
                class="SaveCurrentRecord"
                @click="dialogFormVisible = true"
                >保存当前记录</el-button
              >
            </div>
          </el-footer>
          <div>
            <el-dialog
              :visible.sync="dialogFormVisible"
              width="35%"
              :close-on-click-modal="false"
              :modal="false"
            >
              <el-form-item label="执行人" class="styleClor">
                <el-input v-model="form.Executor"></el-input>
              </el-form-item>
              <el-form-item label="机组" class="styleClor">
                <el-input v-model="form.Machine"></el-input>
              </el-form-item>
              <el-form-item label="说明" class="styleClor">
                <el-input
                  type="textarea"
                  v-model="form.Explain"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <div class="diaBut">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                  <el-button @click="reject">取消</el-button>
                </el-form-item>
              </div>
            </el-dialog>
          </div>
        </el-container>
      </el-form>
    </div>
    <!-- <commponent :is="currentObj"></commponent> -->
  </div>
</template>
<script>
import dingzidata from "@/static/dingzidata.json";
import tiexindata from "@/static/tiexindata.json";
import zhuanzidata from "@/static/zhuanzidata.json";
import "@/views/EvaluationSelection/style/index.less";
// import { getWtPumpsinfo } from "@/api/index";
// import History from "@/views/EvaluationSelection/commponent/score/history.vue";
export default {
  // components: {
  //   History,
  // },
  data() {
    return {
      // currentObj: "",
      timer: "",
      dialogFormVisible: false,
      dingzidata: dingzidata,
      tiexindata: tiexindata,
      zhuanzidata: zhuanzidata,
      option: [],
      subParams: [],
      metaDate: [dingzidata, tiexindata, zhuanzidata],
      form: {
        type: [],
        region: "",
        regions: "",
        regiones: "",
        Executor: "",
        Machine: "",
        Explain: "",
      },
    };
  },
  watch: {
    // dingzidata: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {
    //     console.log(val, "val");
    //   },
    // },
    // tiexindata: {
    //   immediate: true,
    //   deep: true,
    //   handler(tiexin) {
    //     console.log(tiexin, "tiexin");
    //   },
    // },
  },
  mounted() {
    this.currentime();
    this.form.region = this.metaDate[0].name;
    this.subParams = this.dingzidata.param;
  },

  // async created() {
  //   let res2 = await getWtPumpsinfo();
  //   console.log(res2.data.data, "data");
  //   this.option = res2.data.data;
  //   this.form.region = this.option[0].content;
  // },

  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    changexialakuang(e) {
      console.log(e);
    },
    //选择选项按钮
    selectOption(e) {
      console.log(e, "eee");
      this.subParams = e.param;
    },
    //历史记录按钮
    history() {
      // console.log(flag);
      // this.currentObj = flag;
      // console.log(this.form);
      // this.$refs.form.$el.style.display = 'none';
      setTimeout(() => {
        this.$router.push({ path: "/score" });
      }, 800);
    },
    //保存历史记录
    onSubmit() {
      if (this.form.Machine == "") {
        alert("请填写内容");
        return;
      }
      this.form.Executor = "";
      this.form.Machine = "";
      this.form.Explain = "";
      this.dialogFormVisible = false;
    },
    reject() {
      this.form.Executor = "";
      this.form.Machine = "";
      this.form.Explain = "";
      this.dialogFormVisible = false;
    },
    currentime() {
      setInterval(() => {
        this.timer = new Date();
      }, 1000);
    },
  },
};
</script>
<style lang="less">
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #409eff;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}
.el-checkbox__inner {
  background: #0c2039 !important;
}
.grid-content .el-select .el-input .el-input__inner {
  background-color: #409eff;
  color: black;
}
.titleWriting {
  font-size: 60px;
}
.content .el-select .el-input .el-input__inner {
  background-color: #01327d;
  color: #409eff;
  border-color: #409eff;
}

.el-dialog__wrapper .el-dialog {
  background-color: #01327d;
}
.styleClor .el-form-item__label {
  color: #8cc3fe;
  margin-left: -20px;
}
.diaBut {
  display: flex;
  justify-content: center;
  margin-left: -40px;

}
.styleClour .el-form-item__label {
  color: #8cc3fe;
  margin-top: 20px;
}

.historyBut {
  /* line-height: 70px; */
  margin-top: 7px;
  margin-left: 278px;
  color: black;
}
h1 {
  font-size: 40px;
  color: #8cc3fe;
}
.HeaderBox {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.HeaderOne {
  width: 350px;
  line-height: 90px;
  background-color: #fff;
}
.HeaderTwo {
  width: 650px !important;
  line-height: 90px;
  /* background-color: rgb(53, 27, 198); */
  background-color: #0c2039;
}
.HeaderThree {
  width: 350px;
  line-height: 90px;
  color: black;
  background-color: #fff;
}
.TopBox {
  width: 100%;
  height: 70px;
  overflow: hidden;
  /* justify-content: center; */
  background-color: #0c2039;
}

.RightBox {
  width: 50%;
  /* height: 50%; */
  background-color: #0c2039;
  padding: 0px 50px;
}
.topRightBox {
  padding: 30px 50px;
  width: 100%;
  height: 100%;
  background-color: #031351;
}
.onebox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 155px;
  color: #8cc3fe;
  line-height: 155px;
  background-color: #01327d;
  padding-left: 80px;
}
.twobox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 155px;
  color: #8cc3fe;
  line-height: 155px;
  padding-left: 80px;
  /* background-color: blue; */
}
.threebox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 155px;
  color: #8cc3fe;
  background-color: #01327d;
  padding-left: 80px;
}
.fourbox {
  display: flex;
  justify-content: flex-start;
  color: #8cc3fe;
  width: 100%;
  height: 155px;
  padding-left: 80px;
}
.topLeftBox {
  padding: 30px 20px;
  width: 100%;
  height: 560px;
  /* color: red; */
  background-color: #031351;
  overflow-y: scroll;
}
.Fixedbox {
  /* position: fixed; */
  /* left: 0px;
  bottom: 100px; */
  width: 100%;
  /* max-width: 540px; */
  /* min-width: 280px; */
  height: 100px;
  background-color: #031351;
  /* margin-left: 50px; */
  padding: 0 110px;
  z-index: 1;
}
.content {
  display: flex;
  justify-content: space-between;
  margin: 25px 0 0 -60px;
  color: #fff;
}
.LeftBox {
  width: 50%;
  /* height: 50%; */
  background-color: #0c2039;
  /* background-color: red; */
  padding: 0px 50px;
}
.titleDropDown {
  margin-left: -282px;
  line-height: 55px;
}
.displayText {
  width: 100%;
  margin-left: 250px;
  line-height: 55px;
  font-size: 30px;
  color: #8cc3fe;
}
.fontText {
  color: #8cc3fe;
  font-size: 20px;
  display: block;
  line-height: 30px;
  text-align: left;
  letter-spacing: 1.5px;
  margin: 30px 0 0 -30px;
}
.PerformAssessment {
  width: 160px;
  height: 50px;
  color: black;
}
.SaveCurrentRecord {
  width: 160px;
  height: 50px;
  color: black;
}
.BlueBox {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 89%;
  background-color: red;
  overflow: hidden;
}
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside {
  /* background-color: #d3dce6; */
  color: #333;
  text-align: center;
  line-height: 200px;
}
.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  text-align: center;
  line-height: 160px;
}
body > .el-container {
  margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  height: 40px;
}
.row-bg {
  padding: 6px 20px 6px 20px;

  /* background-color: #f9fafc; */
}
.Footbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #0c2039;
}
</style>
